<template>
	<view class="feed-detail">
		<view class="custom-nav-bar">
			<!-- 返回按钮 -->
			<view class="nav-back" @click="goBack">
				<image src="/static/back.png" mode=""></image>
			</view>
			<!-- 页面标题 -->
			<view class="nav-title">详情</view>
		</view>
		<div class="detail-content">
			<p class="title">意见反馈</p>
			<div class="feedtxt">
				<p>提交时间：<span>{{detailObj.create_time_text}}</span></p>
				<p>意见内容：<span>{{detailObj.content}}</span></p>
				<p>联系方式：<span>{{detailObj.mobile}}</span></p>
			</div>
			<div class="imagelist">
				<span>相关问题的截图或图片</span>
				<div style="display: flex; align-items: center; flex-wrap: wrap;">
					<image v-for="(item, index) in detailObj.images" :key="index" :src="item" mode="widthFix"></image>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import { getFeedbackDetail } from '@/api/mine.js'
	export default {
		data() {
			return {
				detailObj: {}
			}
		},
		onLoad(option) {
			// console.log(option, 'ooppttt');
			this.getFeedbackDetail(option.id)
		},
		methods: {
			async getFeedbackDetail (id) {
				const res = await getFeedbackDetail({id: id});
				if (res.response.statusCode === 200) {
					// console.log(res.data.data, 'res.data.data');
					this.detailObj = res.data.data;
					try {
					  this.detailObj.images = JSON.parse(this.detailObj.images);
					} catch (e) {
					  console.error('解析失败:', e);
					}
				}
			},
			goBack() {
				uni.navigateBack({ delta: 1 });
			}
		}
	}
</script>

<style lang="scss" scoped>
.custom-nav-bar {
	height: 50px; /* 导航栏高度 */
	display: flex;
	align-items: center;
	color: #000;
	padding: 30px 16px 16px 16px;
}
.nav-back {
	flex: 0 0 auto;
	cursor: pointer;
	image{
		width: 12px;
		height: 24px;
		// padding-left: 16px;
	}
}
.nav-title {
	flex: 1 1 auto;
	text-align: center;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 17px;
	color: #000000;
}
.detail-content{
	width: 84%;
	padding: 16px;
	background-color: #FFFFFF;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.01);
	border-radius: 12px;
	margin: 20px auto;
	.title{
		padding-bottom: 12px;
		border-bottom: 1px solid #EEEEEE;
		font-weight: 500;
		font-size: 15px;
		color: #2F1F1A;
	}
	.feedtxt{
		padding-top: 12px;
		p{
			font-weight: 400;
			font-size: 13px;
			color: #999999;
			line-height: 30px;
			span{
				font-weight: 400;
				font-size: 13px;
				color: #333333;
			}
		}
	}
	.imagelist{
		span{
			display: block;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 13px;
			color: #999999;
			line-height: 30px;
		}
		image{
			width: 100px;
			height: 100px;
			margin-right: 10px;
			display: block;
		}
	}
}
</style>
